<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<script src="js/vue.js"></script><!-- 必须先导入vue -->
		<script src="js/axios.min.js"></script>
		<script src="js/elementui.js"></script>
		<link rel="stylesheet" href="css/index.css" />
		<style>
			#box {
				margin: auto;
				margin-top: 50px;
				padding: 10px 10px 10px 10px;
				border: 1px skyblue solid;
				height: 400px;
				width: 700px;
				background-color: white;
				border-radius: 5%;
			}

			body {
				background-color: aliceblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="box">
				<h3 style="color: cadetblue;">&nbsp;漂亮的注册页面&nbsp;&nbsp;<el-button type="primary" size="mini" onclick="location.href='login.html'" plain>去登陆</el-button></h3>
				<hr style="margin-bottom: 30px;" />
				<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
					class="demo-ruleForm">
					<el-row>
						<el-col :span="12" :offset="5">
							<el-form-item label="用户名" prop="uname">
								<el-input v-model.number="ruleForm.uname"></el-input>
							</el-form-item>
							<el-form-item label="密码" prop="pass">
								<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="确认密码" prop="upwd">
								<el-input type="password" v-model="ruleForm.upwd" autocomplete="off"></el-input>
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
								<el-button @click="resetForm('ruleForm')">重置</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				ruleForm: {
					uname: "",
					upwd: "",
					pass: ""
				},
				rules: {
					uname: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					upwd: [{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur'
					}],
					pass: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			},
			methods: {
				submitForm(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							if(this.ruleForm.pass!=this.ruleForm.upwd){
								this.$message.error('密码不一致');
								return;
							}
							//注册
							axios.post("http://localhost:8081/s/register", this.ruleForm).then(res => {
								if (res.data) {
									this.$message.success('注册成功');
									//window.location.href="login.html";
								} else {
									this.$message.error('注册失败');
								}

							})
						} else {
							console.log('error submit!!');
							return false;
						}
					});
				},
				resetForma(formName) {
					this.$refs[formName].resetFields();
				}
			}
		})
	</script>
</html>